<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        article{
            width: 50%;
            margin: 0 auto;
        }
        article div{
            border: 1px solid plum;
            padding: 20px;
        }
        article div:last-child{
            height: 400px;
        }
        div img{
            
            height: 400px;
            display: none;
        }
        div button{
            width: 100px;
            height: 30px;
            margin-right: 10px;
        }
        .currentBtn{
            background-color: pink;
            color: #fff;
           

        }
        .currentImg{
            display: block;
        }
    </style>
    <script>
        window.onload=function(){
            var btns=document.getElementsByTagName('button');
            var images=document.getElementsByTagName('img');
            for(var i=0;i<btns.length;i++){
                btns[i].onclick=(function(num){
                    return function(){
                        //取消按钮所有样式
                        for(var j=0;j<btns.length;j++){
                            btns[j].className='';
                        }
                        //给当前按钮添加样式
                        this.className='currentBtn';
                        //隐藏所有图片
                        for(var k=0;k<images.length;k++){
                            images[k].className='';
                        }
                        //匹配图片
                        //当前i为图片的下标
                        images[num].className='currentImg';

                    }

                })(i)
            }

        }
    </script>
</head>
<body>
    <article>
        <div>
            <button class="currentBtn">花花</button>
            <button>草草</button>
            <button>猫猫</button>
            <button>狗狗</button>
        </div>
        <div>
            <p>
                <img class="currentImg" src="./images/花花.jpg" alt="">
                <img src="./images/四叶草.jpg" alt="">
                <img src="./images/7.jpg" alt="">
                <img src="./images/狗狗.jpg" alt="">
            </p>
        </div>
    </article>
</body>
</html>